import React, { useState } from 'react';
import { Button, Form, Input, DatePicker, Select } from 'antd';
import contextData from '../context/contextData';
import { useContext } from 'react';
const { Option } = Select;
export default function ToduListFm() {
  const context = useContext(contextData);
  console.log(context);
  const [form] = Form.useForm();
  const [date, setDate] = useState('2203/2/7');
  // 提交
  const onFinish = (values) => {
    context.onAdd({
      ...values,
      key: new Date(),
      priority: Number(values.priority),
      email: date,
    });
    form.resetFields();
  };
  // 获取选择时间
  const onChange = (date, dateString) => {
    setDate(() => {
      return dateString;
    });
  };
  return (
    <Form
      name="basic"
      labelCol={{ span: 4 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      autoComplete="off"
      form={form}
    >
      <Form.Item
        label="日期"
        name="email"
        rules={[{ required: true, message: '请输入日期!' }]}
      >
        <DatePicker onChange={onChange} />
      </Form.Item>
      <Form.Item
        label="标题"
        name="title"
        rules={[{ required: true, message: '请输入标题!' }]}
      >
        <Input placeholder="请输入标题" />
      </Form.Item>
      <Form.Item
        label="优先级"
        name="priority"
        rules={[{ required: true, message: '请输入优先级!' }]}
      >
        <Select placeholder="请输入优先级" allowClear>
          {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
            <Option key={index} value={item}>
              {item}级
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 20 }}>
        <Button type="primary" htmlType="submit">
          添加
        </Button>
      </Form.Item>
    </Form>
  );
}
